<template>
  <div id="wkEmployeeContract">
    <vxe-toolbar perfect>
      <template #buttons>
        <vxe-button
          type="text"
          icon="vxe-icon-refresh"
          class="button-blue"
          content="刷新"
          :loading="showLoading"
          @click="findEmployeeContractList(wkEmployeeId)"
        ></vxe-button>
        <vxe-button
          type="text"
          icon="vxe-icon-square-plus"
          class="button-blue"
          content="新增"
          @click="handleAdd(-1)"
        ></vxe-button>
        <vxe-button
          type="text"
          icon="vxe-icon-save"
          class="button-blue"
          content="保存"
          @click="saveList"
        ></vxe-button>
        <vxe-button
          type="text"
          icon="vxe-icon-delete"
          class="button-red"
          content="删除"
          @click="handleDelete"
        ></vxe-button>
      </template>
    </vxe-toolbar>
    <div class="wkEmployeeContractTable">
      <vxe-table
        ref="wkEmployeeContractTableRef"
        :loading="showLoading"
        class="mytable-scrollbar"
        align="left"
        border
        height="auto"
        :keep-source="true"
        :data="employeeContract"
        :row-config="{ isCurrent: true, isHover: true }"
        :mouse-config="{ selected: true }"
        :keyboard-config="{ isArrow: true, isTab: true, isEdit: true }"
        :edit-config="{ trigger: 'click', mode: 'cell', showIcon: false }"
        resizable
        show-overflow
      >
        <vxe-column type="checkbox" align="center" width="26"></vxe-column>
        <vxe-column type="seq" title="序号" align="center" width="30"></vxe-column>
        <vxe-column
          field="contractCode"
          title="编码"
          min-width="80px"
          :edit-render="{ autofocus: '.vxe-input--inner' }"
        >
          <template #edit="{ row }">
            <vxe-input v-model="row.contractCode" type="text"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column
          field="contractName"
          title="合同名称"
          min-width="80px"
          :edit-render="{ autofocus: '.vxe-input--inner' }"
        >
          <template #edit="{ row }">
            <vxe-input v-model="row.contractName" type="text"></vxe-input>
          </template>
        </vxe-column>
        <!-- <vxe-column
          field="orgId"
          title="组织机构"
          min-width="80px"
          :edit-render="{ autofocus: '.vxe-input--inner' }"
        >
          <template #edit="{ row }">
            <vxe-input v-model="row.orgId" type="text"></vxe-input>
          </template>
        </vxe-column> -->
        <vxe-column
          field="inputCode"
          title="输入码"
          min-width="80px"
          :edit-render="{ autofocus: '.vxe-input--inner' }"
        >
          <template #edit="{ row }">
            <vxe-input v-model="row.inputCode" type="text"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column
          field="contractType"
          title="合同类型"
          min-width="80px"
          :edit-render="{ autofocus: '.vxe-input--inner' }"
        >
          <template #edit="{ row }">
            <vxe-input v-model="row.contractType" type="text"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column
          field="icontType"
          title="签订类型"
          min-width="80px"
          :edit-render="{ autofocus: '.vxe-input--inner' }"
        >
          <template #edit="{ row }">
            <vxe-input v-model="row.icontType" type="text"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column
          field="iproMonth"
          title="试用期限"
          min-width="80px"
          :edit-render="{ autofocus: '.vxe-input--inner' }"
        >
          <template #edit="{ row }">
            <vxe-input v-model="row.iproMonth" type="text"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column
          field="isProb"
          title="是否试用"
          min-width="80px"
          :edit-render="{ autofocus: '.vxe-input--inner' }"
        >
          <template #edit="{ row }">
            <vxe-input v-model="row.isProb" type="text"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column
          field="majorCorp"
          title="合同主体单位"
          min-width="80px"
          :edit-render="{ autofocus: '.vxe-input--inner' }"
        >
          <template #edit="{ row }">
            <vxe-input v-model="row.majorCorp" type="text"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column
          field="isUnch"
          title="是否解约"
          min-width="80px"
          :edit-render="{ autofocus: '.vxe-input--inner' }"
        >
          <template #edit="{ row }">
            <vxe-input v-model="row.isUnch" type="text"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column
          field="presenter"
          title="解约提出方"
          min-width="80px"
          :edit-render="{ autofocus: '.vxe-input--inner' }"
        >
          <template #edit="{ row }">
            <vxe-input v-model="row.presenter" type="text"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column
          field="unchReason"
          title="解除合同原因"
          min-width="80px"
          :edit-render="{ autofocus: '.vxe-input--inner' }"
        >
          <template #edit="{ row }">
            <vxe-input v-model="row.unchReason" type="text"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column
          field="isRefer"
          title="是否提交"
          min-width="80px"
          :edit-render="{ autofocus: '.vxe-input--inner' }"
        >
          <template #edit="{ row }">
            <vxe-input v-model="row.isRefer" type="text"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column
          field="startDate"
          title="生效时间"
          min-width="80px"
          :edit-render="{ autofocus: '.vxe-input--inner' }"
        >
          <template #edit="{ row }">
            <vxe-input v-model="row.startDate" type="date" transfer></vxe-input>
          </template>
        </vxe-column>
        <vxe-column
          field="endDate"
          title="失效时间"
          min-width="80px"
          :edit-render="{ autofocus: '.vxe-input--inner' }"
        >
          <template #edit="{ row }">
            <vxe-input v-model="row.endDate" type="date" transfer></vxe-input>
          </template>
        </vxe-column>
        <vxe-column
          field="signDate"
          title="签订时间"
          min-width="80px"
          :edit-render="{ autofocus: '.vxe-input--inner' }"
        >
          <template #edit="{ row }">
            <vxe-input v-model="row.signDate" type="date" transfer></vxe-input>
          </template>
        </vxe-column>
        <vxe-column
          field="isEffective"
          title="合同状态"
          min-width="80px"
          :edit-render="{ autofocus: '.vxe-input--inner' }"
        >
          <template #edit="{ row }">
            <vxe-input v-model="row.isEffective" type="text"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column
          field="filePath"
          title="附件地址"
          min-width="80px"
          :edit-render="{ autofocus: '.vxe-input--inner' }"
        >
          <template #edit="{ row }">
            <vxe-input v-model="row.filePath" type="text"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column
          field="seq"
          title="顺序号"
          min-width="80px"
          :edit-render="{ autofocus: '.vxe-input--inner' }"
        >
          <template #edit="{ row }">
            <vxe-input v-model="row.seq" type="text"></vxe-input>
          </template>
        </vxe-column>
      </vxe-table>
    </div>
  </div>
</template>

<script setup lang="ts">
// 引入组件区 ==========
import { ref, reactive, getCurrentInstance } from 'vue';
import { IsEmpty } from '@/utils/common';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage';

defineExpose({
  findEmployeeContractList
});

interface RowVO {
  id: string;
  contractCode: string;
  contractName: string;
  // orgId: string;
  inputCode: string;
  contractType: string;
  icontType: string;
  iproMonth: string;
  isProb: string;
  majorCorp: string;
  isUnch: string;
  presenter: string;
  unchReason: string;
  startDate: string;
  endDate: string;
  signDate: string;
  isEffective: string;
  filePath: string;
  seq: number;
  wkEmpId: string;
}

let { proxy }: any = getCurrentInstance();
let showLoading = ref(false); //刷新+表格加载状态
let employeeContract = reactive([]);
let wkEmployeeId = ref('');

// 获取职务列表
function findEmployeeContractList(wkEmpId: any) {
  showLoading.value = true;
  wkEmployeeId.value = wkEmpId;
  employeeContract.length = 0; //放入数据前清空数据
  const url = '/wk/employeeContract/getEmployeeContractList/' + wkEmployeeId.value;
  proxy.$http
    //注意此处的数据条数
    .get(url)
    .then((res: any) => {
      if (!IsEmpty(res.data)) {
        employeeContract.push(...res.data);
      }
      showLoading.value = false;
    })
    .catch((err: any) => {
      VxeMessage(err, VxeNotifyType.error);
      showLoading.value = false;
    });
}

//新增
async function handleAdd(row?: RowVO | number) {
  const $table = proxy.$refs.wkEmployeeContractTableRef as any;
  if ($table) {
    const record = {
      id: null,
      contractCode: '',
      contractName: '',
      // orgId: '',
      inputCode: '',
      contractType: '',
      icontType: '',
      iproMonth: '',
      isProb: '',
      majorCorp: '',
      isUnch: '',
      presenter: '',
      unchReason: '',
      startDate: '',
      endDate: '',
      signDate: '',
      isEffective: '',
      filePath: '',
      seq: '', //顺序号
      wkEmpId: wkEmployeeId
    };
    const { row: newRow } = await $table.insertAt(record, row);
    await $table.setEditRow(newRow);
  }
}
//批量保存
function saveList() {
  const $table = proxy.$refs.wkEmployeeContractTableRef as any;
  const arrNews = $table.getInsertRecords();
  const arrModifies = $table.getUpdateRecords();
  arrNews.forEach((item: any, idx) => {
    const url = '/wk/employeeContract/addEmployeeContract';
    const data = item;
    proxy.$http
      .post(url, data)
      .then((res: any) => {
        if (arrModifies.length <= 0 && idx === arrNews.length - 1) {
          VxeMessage('保存成功', VxeNotifyType.success);
          findEmployeeContractList(wkEmployeeId.value);
        }
      })
      .catch((err) => {
        if (arrModifies.length <= 0 && idx === arrNews.length - 1) {
          VxeMessage('保存失败', VxeNotifyType.error);
        }
      });
  });
  arrModifies.forEach((item, idx) => {
    const url = '/wk/employeeContract/updateEmployeeContract';
    const data = item;
    proxy.$http
      .post(url, data)
      .then((res: any) => {
        if (idx === arrModifies.length - 1) {
          VxeMessage('保存成功', VxeNotifyType.success);
          findEmployeeContractList(wkEmployeeId.value);
        }
      })
      .catch((err) => {
        if (idx === arrModifies.length - 1) {
          VxeMessage('保存失败', VxeNotifyType.error);
        }
      });
  });
}

//删除
function handleDelete() {
  const $xTable = proxy.$refs.wkEmployeeContractTableRef as any;
  const selectRows = $xTable.getCheckboxRecords();
  if (selectRows.length <= 0) {
    VxeMessage('请先选中要删除的项', VxeNotifyType.warning);
    return;
  }
  proxy
    .$confirm('确定删除此项？', '提示', {
      cancelButtonClass: 'cancel-button',
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    .then((type) => {
      if (type === 'confirm') {
        selectRows.forEach((item, idx) => {
          const url = '/wk/employeeContract/deleteEmployeeContract';
          proxy.$http
            .post(url, item)
            .then((res: any) => {
              if (idx === selectRows.length - 1) {
                VxeMessage('删除成功', VxeNotifyType.success);
                findEmployeeContractList(wkEmployeeId.value);
              }
            })
            .catch((err) => {
              VxeMessage('删除时出现异常', VxeNotifyType.error);
            });
        });
      }
    });
}
</script>
<style lang="scss" scoped>
#wkEmployeeContract {
  height: 100%;
  // 附加按钮间距
  .button-blue,
  .button-red {
    margin: 5px 0 5px 5px;
  }
  .wkEmployeeContractTable {
    height: calc(100% - 40px);
  }
}
</style>
